<template>
  <div class="mike-promotion-activity">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>

          <sn8-select @change="sn8Changed"/>
          <!--          <el-select-->
          <!--            filterable-->
          <!--            @change="getDataList()"-->
          <!--            clearable-->
          <!--            placeholder="型号SN8"-->
          <!--            v-model="dataForm.sn8"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              :key="item.value"-->
          <!--              :label="item.label"-->
          <!--              :value="item.value"-->
          <!--              v-for="item in sn8List"-->
          <!--            >-->
          <!--            </el-option>-->
          <!--          </el-select>-->
        </el-form-item>
        <el-form-item/>
        <el-form-item>
          <el-button
            @click="clickOnAddOrUpdate()"
            type="primary">
            <i class="el-icon-plus"/>
          </el-button>
        </el-form-item>
      </el-form>

      <!--                                @selection-change="dataListSelectionChangeHandle"
            -->
      <el-table
        :data="dataList"
        border
        style="width: 100%;"
        v-loading="dataListLoading"
      >

        <el-table-column
          :label="$t('mike.img')"
          align="center"
          header-align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div
              class="text-center is-align-middle is-justify-center el-row--flex"
            >
              <midea-admin-image
                :height="60"
                :previewable="true"
                :url="scope.row.url"
                :width="60"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('model.name')"
          align="center"
          header-align="center"
          prop="name"
        />
        <el-table-column
          :label="$t('mike.link')"
          align="center"
          header-align="center"
          :show-overflow-tooltip="true"
          prop="link"
        >
          <template slot-scope="scope">
            <a
              :href="scope.row.link"
              target="_blank">{{ scope.row.link }}</a>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('mike.sn8')"
          align="center"
          header-align="center"
          prop="sn8"
        />

        <el-table-column
          :label="$t('model.createTime')"
          align="center"
          header-align="center"
          prop="createTime"
        />

        <el-table-column
          :label="$t('handle')"
          align="center"
          fixed="right"
          header-align="center"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              @click="clickOnAddOrUpdate(scope.row.id)"
              size="small"
              type="primary"
              plain
            >
              {{ $t("update") }}
            </el-button>
            <el-button
              @click="deleteHandle(scope.row.id)"
              size="small"
              type="danger"
              plain
            >{{ $t("delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="pageCurrentChangeHandle"
        @size-change="pageSizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
      />

      <add-or-update
        @refreshDataList="getDataList"
        ref="addOrUpdate"
        v-if="addOrUpdateVisible"
      />
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'

import AddOrUpdate from './activity-add-or-update'
import Sn8Select from '@/components/sn8.select'

export default {
  name: 'MikePromotionActivity',
  mixins: [mixinViewModule],
  components: { Sn8Select, AddOrUpdate },
  data () {
    return {
      addOrUpdateVisible: false,
      requesting: false,
      activatedIsNeed: true,
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/piclink/get/all',
        getDataListIsPage: true,
        deleteURL: '/midea/menu/piclink/del/'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      dataForm: {
        sn8: ''
      }
    }
  },
  methods: {
    sn8Changed (sn8) {
      this.dataForm.sn8 = sn8
      this.getDataList()
    },
    clickOnAddOrUpdate (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.dataForm.sn8 = this.dataForm.sn8
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mike-promotion-activity {
}
</style>
